<template>
    <!-- 绑定动态类名，根据父组件传的数据显示不同图片 -->
    <span class="support-icon" :class="iconCls"></span>
</template>
<script>
    export default{
        name:"support-icon",
        props: {
            size:{
                type:Number
            },
            type:{
                type:Number
            }
        },
        computed: {
            iconCls(){
                const classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
                return `ico-${this.size} ${classMap[this.type]}`
            }
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin";
.support-icon
    display: inline-block
    background-repeat: no-repeat
.ico-1
    width: 12px
    height: 12px
    vertical-align: top
    margin-right: 6px
    background-size: 12px 12px
    /* &代表上级class名 */
    &.decrease
    /* 空一格，否则会报错 */
     bg-image('decrease_1')
    &.discount
     bg-image('discount_1')
    &.guarantee
     bg-image('guarantee_1')
    &.invoice
     bg-image('invoice_1')
    &.special
     bg-image('special_1')
.ico-2
    width: 16px
    height: 16px
    vertical-align: top
    margin-right: 6px
    background-size: 16px 16px
    &.decrease
     bg-image('decrease_2')
    &.discount
     bg-image('discount_2')
    &.guarantee
     bg-image('guarantee_2')
    &.invoice
     bg-image('invoice_2')
    &.special
     bg-image('special_2')
</style>